<template>
  <header class="header">
    <div class="grid_2 logo">
      <a><img src="@/assets/images/aniu.png"/></a>
    </div>
    <nav class="grid_7 nav">
      <div v-for="(item, index) in navParams.navName" :key="item.sort" @click="navClick(index, item.src)"
           :class="[{'grid_1': true}, [index == 0? 'alpha': ''], [index==navParams.navName.length-1? 'omega': ''], [currentNav==index? 'active': ''], 'nav-item']">
        <a>{{item.name}}</a>
      </div>
    </nav>
    <!-- 暂时移除-->
    <!--<div class="grid_3 header-search">-->
      <!--<div class="left"><input class="search-box"/></div>-->
      <!--<div class="left"><a class="search-btn">GO</a></div>-->
    <!--</div>-->
    <div class="grid_3 user-info">
      <a @click="beginRegister" v-if="!loginNameCount">注册</a>
      <a @click="beginLogin" v-if="!loginNameCount">登录</a>
      <a @click="signOut" v-if="loginNameCount">登出</a>
      <a v-if="loginNameCount">{{getUserName}}</a>
    </div>
    <login-panel :begin-login="login.showLoginPanel" @close="closeLogin" @success="loginSuccess"></login-panel>
    <register-panel :begin-register="register.showRegisterPanel" @close="closeRegister"></register-panel>
  </header>
</template>
<script>
import axios from '../../node_modules/axios/dist/axios'
import loginPanel from './LoginPanel'
import registerPanel from './RegisterPanel'

export default {
  data () {
    return {
      navParams: {
        navName: [],
        clickIndex: 0
      },
      login: {
        loginName: '',
        showLoginPanel: false
      },
      logined: {
        userName: ''
      },
      register: {
        showRegisterPanel: false
      },
      show: true
    }
  },
  components: {
    loginPanel,
    registerPanel
  },
  computed: {
    loginNameCount () {
      return !this._.isEmpty(this.$store.state.userName)
    },
    currentNav () {
      return this.$store.state.navIndex
    },
    getUserName () {
      return this.$store.state.userName
    }
  },
  methods: {
    beginLogin () {
      this.login.showLoginPanel = true
      this.$store.dispatch('obtainVeriCodeAsyn')
    },
    beginRegister () {
      this.register.showRegisterPanel = true
      this.$store.dispatch('obtainVeriCodeAsyn', {operator: 'register'})
    },
    closeLogin () {
      this.login.showLoginPanel = false
    },
    closeRegister () {
      this.register.showRegisterPanel = false
    },
    loginSuccess (user) {
      let DateUtil = require('../util/DateUtil')
      let greet = DateUtil.timePeriod(new Date())
      this.$store.commit('setUserName', `${greet} ${user.userName}`)
    },
    signOut () {
      let _this = this
      axios.post('/login/signOut').then(function (res) {
        _this.$store.commit('setUserName', '')
      })
    },
    navClick (index, navSrc) {
      this.$store.commit('selectNav', index)
      this.$router.push(navSrc)
    },
    autoLogin () {
      let _this = this
      axios.get('/login/autoLogin').then(function (res) {
        if (!_this._.isEmpty(res.data.datas.user)) {
          _this.loginSuccess(res.data.datas.user)
        }
      })
    }
  },
  mounted () {
    let _this = this
    axios.get('/nav/navList').then(function (res) {
      res.data.datas.forEach(function (data) {
        _this.navParams.navName.push({name: data.name, src: data.src})
      })
    })
    this.autoLogin()
  }
}
</script>

<style scoped>
@import '../assets/css/header.css';
</style>
